<template>
  <view>
	<!-- 触发加载更多项目的事件 -->
	<!-- 10距离底部的阈值 -->
	<!-- 是否允许垂直滚动 -->
    <scroll-view
      class="scroll-view"
      :style="{ height: viewHeight + 'px' }" 
      @scrolltolower="loadMoreItems" 
      :lower-threshold="10" 
	  :refresher-threshold="50"
      :scroll-y="hasItems && !isRefreshing" 
	   @touchstart="onTouchStart" 
	  @touchmove="onTouchMove" 
	   @scroll="onScroll"
	  :scroll-with-animation="true"
    >
	<!-- 自定义下拉刷新模板 -->
	    <view class="refresh-indicator" v-if="isRefreshing">
	      <image class="refresh-icon"  src="/static/gif/refresh.gif" mode="aspectFit"></image>
	    </view>
      <!-- 头部插槽 -->
      <slot name="header"></slot>
      <!-- 回复插槽 -->
      <slot name="reply-header"></slot>
      
      <!-- 遍历 itemList 数组，渲染每个项目 -->
      <view v-for="item in itemList" :key="item.id"> <!-- 使用 view 作为包裹元素 -->
        <slot name="item" :item="item"></slot> <!-- 渲染每个项目的插槽 -->
      </view>
      
      <!-- 加载状态 -->
      <view v-if="loading && !itemList.length" class="loading">加载中...</view>
      <view v-if="!loading && !itemList.length" class="no-data">暂无数据</view>
      <view v-if="!loading && !canLoadMore && itemList.length > 0" class="no-more-data">没有更多数据</view>
      <view v-if="error" class="error">{{ error }}</view> <!-- 显示错误信息 -->
    </scroll-view>
  </view>
</template>

<script>
export default {
  name: "dynamic-list-xhd", // 组件名称
  props: {
    itemList: { 
      type: Array,
      required: true, // 必须传入项目列表
    },
    viewHeight: {
      type: Number,
      // default: '100vh', // 可选的默认值
    },
    itemHeight: {
      type: Number,
      default: 50, // 默认每个项目的高度
    },
    loadCount: { // 新增的 prop
      type: Number,
      default: 10, // 默认加载数量
    },
    fetchData: { // 接收 fetchData 方法
      type: Function,
      required: true, // 必须传入数据获取函数
    },
	 needRefresh: { // 新增的 prop
	      type: Boolean,
	      default: false, // 默认值为 false
	 },
	startRefreshOnce: { // 新增的 prop
	      type: Boolean,
	      default: false, // 默认值为 false
	 },
  },
  data() {
    return {
      loading: false, // 加载状态
      error: null, // 错误信息
      canLoadMore: true, // 是否可以加载更多项目
	  isRefreshing: false, // 是否正在刷新
	  startY: 0, // 记录触摸开始的位置
	 isTouching: false, // 记录是否正在触摸
	 scrollTop: 0, // 当前滚动位置
    };
  },
  computed: {
    hasItems() {
      return this.itemList.length > 0; // 判断是否有项目
    },
  },
  watch: {
    viewHeight: {
      async handler(newViewHeight) {
		   console.log("新的高度为",newViewHeight);
   //      if (newViewHeight > 0) {
   //        try {
			 
   //          const requiredCount = await this.calculateInitialLoadCount(); 
			// // 计算初始加载数量
			//  console.log("初始需要的加载数据是:  ---加载状态 ---- 数据 ---- 能不能加载", requiredCount,this.loading,this.hasItems,this.canLoadMore);
   //          this.loadData(requiredCount); // 初始加载
           
   //        } catch (error) {
   //          console.error(error); // 处理错误
   //        }
   //      }
      }
    },
	startRefreshOnce: {
	   async handler(newvalue) {
		 console.log("新的刷新值为",newvalue);
	     if (newvalue ) {
	       try {
			  await this.onRefresh();
	       } catch (error) {
	         console.error(error); // 处理错误
	       }
	     }
	   }
	 },
  },
  methods: {
    async loadMoreItems() {
      console.log("加载更多数据 ---加载状态 ---- 数据 ---- 能不能继续加载",this.loading,this.hasItems,this.canLoadMore);
      if (!this.loading  && this.canLoadMore) {
        await this.loadData(this.loadCount); // 使用从父组件传来的加载数量
      }
    },
    async loadData(count) {
		this.isRefreshing=false;
      if (!this.canLoadMore) return; // 防止重复加载
      this.loading = true; // 设置加载状态
      this.error = null; // 清空错误信息
      this.canLoadMore = false; // 禁止再次加载
      
      try {
        const newItems = await this.fetchData(count,'loadMore'); // 获取加载的数量
        this.canLoadMore = newItems.length === count; // 判断是否可以继续加载
		console.log("加载列表中本次加载的数据",newItems);
      } catch (err) {
        this.error = err; // 处理错误情况
        console.log(err);
      } finally {
        this.loading = false; // 重置加载状态
		this.isRefreshing=false;
      }
    },
    async calculateInitialLoadCount() {
      return new Promise((resolve, reject) => {
        // 计算需要加载的用户数量
        const requiredCount = Math.ceil(this.viewHeight / this.itemHeight) * 2; // 计算需要加载的项目数量
        if (this.itemList.length > requiredCount) {
          resolve(0); // 如果已有项目数量大于计算数量，则不需要加载
        }
        resolve(requiredCount); // 返回计算的数量
      });
    },
	 onScroll(event) {
	      this.scrollTop = event.detail.scrollTop; // 更新当前的滚动位置
		  //console.log(this.scrollTop);
	    },
	  onTouchStart(event) {
	       this.startY = event.touches[0].clientY; // 获取触摸开始的位置
		  // console.log(this.startY);
	       this.isTouching = true; // 设置正在触摸状态
	     },
	     onTouchMove(event) {
	      if (!this.needRefresh||!this.isTouching || this.isRefreshing || this.scrollTop > 0) return; // 如果未触摸、正在刷新或不在顶部则返回
		  //console.log("移动了");
	       const currentY = event.touches[0].clientY;
	       const distance = currentY - this.startY; // 计算下拉的距离
	       if (distance >= 100) { // 如果下拉距离超过50px
		  // console.log("111");
	         this.onRefresh();
	       }
	     },
	async onRefresh() {
//		console.log(this.isRefreshing,this.loading);
	      if (this.isRefreshing || this.loading) return; // 如果正在刷新，则直接返回
		  console.log("开始刷新>>>");
	      this.isRefreshing = true;
		   this.error = null; // 清空错误信息
		   this.loading=true;
		   this.canLoadMore=true;
		     this.translateY = 0; // 重置下拉距离
	      try {
			// this.$emit("clearData");
	         const requiredCount = Math.ceil(this.viewHeight / this.itemHeight) * 2; // 计算需要加载的项目数量
	         const newItems = await this.fetchData(requiredCount,"refresh"); // 刷新时加载当前列表长度的项目
			 this.canLoadMore = newItems.length === requiredCount; // 判断是否可以继续加载
			  console.log("刷新列表中的本次刷新的数据",newItems);
	         //this.$emit('refreshData', newItems);
	      	 console.log("现在拥有的数据: ",this.itemList);
	      } catch (err) {
	          this.error = err; // 处理错误情况
	          console.log(err);
	      } finally {
	        this.loading = false;
	         this.isRefreshing = false; // 重置刷新状态
	         this.isTouching = false; // 结束触摸状态
	      }
	    },
  },
  onLoad() {
	console.log(111);
  	 
  },
  async mounted() {
    // 组件挂载后的逻辑
	 console.log("刷新引起来的加载",this.startRefreshOnce);
	//初始化数据
	
	if(this.startRefreshOnce){
	   await this.onRefresh();
	 }
	
	//this.loadMoreItems();
	
	//this.isRefreshing=true;
  },
 
};
</script>

<style scoped>
.scroll-view {
  overflow: hidden; /* 禁止滚动 */
}
.refresh-indicator {
background-color: white;
  display: flex; /* 使用 flexbox */
  flex-direction: column; /* 垂直排列 */
  align-items: center; /* 水平居中对齐 */
  justify-content: center; /* 垂直居中对齐 */
  padding: 10px; /* 添加一些内边距 */
}

.refresh-icon {
   transform: scale(1.8); /* 放大 1.5 倍 */
  //background-color: red;
  width: 120px; /* 根据需要设置图标的宽度 */
  height: 60px; /* 根据需要设置图标的高度 */
}

.loading {
  text-align: center; /* 中心对齐 */
  padding: 10px; /* 内边距 */
  color: #666; /* 字体颜色 */
}
.no-data {
  text-align: center; /* 中心对齐 */
  padding: 10px; /* 内边距 */
  color: #999; /* 字体颜色 */
}
.no-more-data {
  text-align: center; /* 中心对齐 */
  padding: 10px; /* 内边距 */
  color: #999; /* 字体颜色 */
}
.error {
  color: red; /* 错误信息颜色 */
  text-align: center; /* 中心对齐 */
}
</style>